<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>当前位置</el-breadcrumb-item>
      <el-breadcrumb-item>设备运维</el-breadcrumb-item>
      <el-breadcrumb-item
        ><a href="#/equipmentAccount" style="cursor: pointer; color: #fff"
          >设备台账</a
        ></el-breadcrumb-item
      >
    </el-breadcrumb>
    <div style="position: relative">
      <div class="shebeixinxigailan">
        <div style="margin-left: 10px">设备信息概览</div>
      </div>
    </div>
    <div class="flex2">
      <div class="top">
        <img src="../../assets/icon/shebei.png" alt="" class="shebei" />
        <div>
          <div>设备总数</div>
          <div style="font-size: 20px; margin-top: 20px">3</div>
        </div>
      </div>
      <div class="top">
        <div id="main" style="height: 190px; width: 100%"></div>
      </div>
      <div class="top">
        <div id="main1" style="height: 190px; width: 100%"></div>
      </div>
      <div class="top">
        <div id="main2" style="height: 190px; width: 100%"></div>
      </div>
    </div>
    <div class="select">
      <span>设备类型：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span style="margin-left: 10px">使用部门：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span style="margin-left: 10px">安装位置：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <span style="margin-left: 10px">设备使用状况：</span>
      <el-select v-model="value" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button type="primary" size="small" style="margin: 0 10px"
        >更多条件</el-button
      >
      <el-link type="primary" :underline="false">重置</el-link>
    </div>
    <div class="select">
      <el-button type="primary" icon="el-icon-search" size="small"
        >搜索</el-button
      >
      <el-button type="primary" size="small">添加</el-button>
      <el-button type="primary" size="small">批量删除</el-button>
      <el-button type="primary" size="small">导入</el-button>
      <el-button type="primary" size="small">导出</el-button>
    </div>
    <div style="color: #fff">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        cell-style="color:#fff"
        header-cell-style="color:#fff;background:rgb(27, 79, 133)"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="1" label="设备编码"></el-table-column>
        <el-table-column prop="2" label="设备名称"></el-table-column>
        <el-table-column prop="3" label="设备类型"></el-table-column>
        <el-table-column prop="4" label="使用部门"></el-table-column>
        <el-table-column prop="5" label="安装位置"></el-table-column>
        <el-table-column prop="6" label="生产厂商"></el-table-column>
        <el-table-column prop="7" label="规格型号"></el-table-column>
        <el-table-column prop="8" label="资产负责人"></el-table-column>
        <el-table-column prop="9" label="资产负责人电话"></el-table-column>
        <el-table-column prop="10" label="供应商"></el-table-column>
        <el-table-column prop="11" label="精度"></el-table-column>
        <el-table-column prop="12" label="维护保养周期"></el-table-column>
        <el-table-column prop="13" label="使用状况"></el-table-column>
        <el-table-column label="操作">
          <template>
            <div class="flex" style="flex-wrap: wrap">
              <div style="font-size: 25px; cursor: pointer">
                <i class="el-icon-s-order" style="margin-left: 5px"></i>
              </div>
              <div style="font-size: 25px; cursor: pointer">
                <i class="el-icon-edit-outline" style="margin-left: 5px"></i>
              </div>
              <div style="font-size: 25px; cursor: pointer">
                <i class="el-icon-menu" style="margin-left: 5px"></i>
              </div>
              <div style="font-size: 25px; cursor: pointer">
                <i class="el-icon-delete" style="margin-left: 5px"></i>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 20px 0; text-align: end">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20]"
          :page-size="3"
          layout="total, sizes, prev, pager, next, jumper"
          :total="3"
        >
        </el-pagination>
      </div>
    </div>
    <div class="flex2">
      <el-radio-group v-model="radio1">
        <el-radio-button label="保养记录"></el-radio-button>
        <el-radio-button label="维修记录"></el-radio-button>
        <el-radio-button label="运行监测"></el-radio-button>
      </el-radio-group>
      <div>
        <span>已保养次数：</span>
        <span style="color: #409eff">1</span>
        <span style="margin-left: 10px">上次保养时间：</span>
        <span style="color: #409eff">2022-01-01 00:00:01</span>
        <span style="margin-left: 10px">下次保养时间：</span>
        <span style="color: #409eff">2023-01-01 00:00:01</span>
      </div>
    </div>
    <div style="color: #fff">
      <el-table
        border
        ref="multipleTable"
        :data="tableData1"
        style="width: 100%"
        cell-style="color:#fff"
        header-cell-style="color:#fff;background:rgb(27, 79, 133)"
        row-style="background-color:red"
      >
        <el-table-column label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="1" label="工单编号"></el-table-column>
        <el-table-column prop="2" label="计划名称"></el-table-column>
        <el-table-column prop="3" label="保养日期"></el-table-column>
        <el-table-column prop="4" label="保养标准"></el-table-column>
        <el-table-column prop="5" label="保养级别"></el-table-column>
        <el-table-column prop="6" label="保养班组"></el-table-column>
        <el-table-column label="操作">
          <template>
            <div class="flex" style="flex-wrap: wrap">
              <div style="font-size: 25px; cursor: pointer">
                <i class="el-icon-s-order" style="margin-left: 5px"></i>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin: 20px 0; text-align: end">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="currentPage1"
          :page-sizes="[10, 20]"
          :page-size="1"
          layout="total, sizes, prev, pager, next, jumper"
          :total="1"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
  
<script>
export default {
  data() {
    return {
      tableData: [
        {
          1: "ZYKT01",
          2: "1#中央空调",
          3: "中央空调",
          4: "能源事业部",
          5: "能源中心",
          6: "格力",
          7: "ABC123",
          8: "张三",
          9: "18818818888",
          10: "富士康",
          11: "666",
          12: "1天",
          13: "启用",
        },
        {
          1: "ZYKT01",
          2: "1#中央空调",
          3: "中央空调",
          4: "能源事业部",
          5: "能源中心",
          6: "格力",
          7: "ABC123",
          8: "张三",
          9: "18818818888",
          10: "富士康",
          11: "666",
          12: "1天",
          13: "启用",
        },
        {
          1: "ZYKT01",
          2: "1#中央空调",
          3: "中央空调",
          4: "能源事业部",
          5: "能源中心",
          6: "格力",
          7: "ABC123",
          8: "张三",
          9: "18818818888",
          10: "富士康",
          11: "666",
          12: "1天",
          13: "启用",
        },
      ],
      multipleSelection: [],
      currentPage: 1,
      radio1: "保养记录",
      currentPage1: 1,
      tableData1: [
        {
          1: "BY202103030000003",
          2: "中央空调保养计划",
          3: "2021-03-03",
          4: "中央空调保养",
          5: "二级保养",
          6: "设备保养班",
        },
      ],
    };
  },
  methods: {
    handleSizeChange1(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 柱状图
    initCharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main"));

      // 指定图表的配置项和数据
      var option = (option = {
        title: {
          text: "设备类型统计",
          left: "left",
          top: "50%",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "1%",
          left: "center",
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
                textStyle: {
                  color: "#fff",
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 100, name: "中央空调" },
              { value: 200, name: "分体空调" },
              { value: 300, name: "水泵" },
              { value: 400, name: "空压机" },
            ],
          },
        ],
      });
      myChart.setOption(option);
    },
    // 柱状图
    initCharts1() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main1"));

      // 指定图表的配置项和数据
      var option = (option = {
        title: {
          text: "设备归属区域统计",
          left: "left",
          top: "50%",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "1%",
          left: "center",
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
                textStyle: {
                  color: "#fff",
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 100, name: "试制中心" },
              { value: 200, name: "能源中心" },
              { value: 300, name: "研发大楼" },
              { value: 400, name: "动力总成" },
            ],
          },
        ],
      });
      myChart.setOption(option);
    },
    // 柱状图
    initCharts2() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("main2"));

      // 指定图表的配置项和数据
      var option = (option = {
        title: {
          text: "设备使用状况统计",
          left: "left",
          top: "50%",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "1%",
          left: "center",
          itemWidth: 15,
          itemHeight: 15,
          textStyle: {
            color: "#fff",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
                textStyle: {
                  color: "#fff",
                },
              },
            },
            labelLine: {
              show: false,
            },
            data: [{ value: 100, name: "启用" }],
          },
        ],
      });
      myChart.setOption(option);
    },
  },
  mounted() {
    this.initCharts();
    this.initCharts1();
    this.initCharts2();
  },
};
</script>
  
<style scoped>
.top {
  width: 24.5%;
  height: 200px;
  background-color: rgb(6, 34, 58);
  display: flex;
  flex-direction: row;
  align-items: center;
}

.shebeixinxigailan {
  margin: 20px 0;
}
.shebeixinxigailan::after {
  content: "";
  width: 5px;
  height: 20px;
  background: rgb(82, 124, 240);
  position: absolute;
  top: 0;
  left: 0;
}
.shebei {
  width: 70px;
  height: 70px;
  margin: 10px;
}

.select {
  margin: 20px 0;
}

.el-select {
  width: 120px !important;
  border: 1px solid #fff !important;
}

::v-deep .el-select,
::v-deep .el-input,
::v-deep .el-input__inner {
  height: 30px !important;
  background: none;
  color: #fff;
  border: 0px;
  border-radius: 0px;
  align-items: center;
  /* text-align: center; */
}

::v-deep .el-input__icon {
  line-height: 0px !important;
}

/*最外层透明*/
::v-deep .el-table,
::v-deep .el-table__expanded-cell {
  background-color: transparent;
}
/* 表格内背景颜色 */
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  background-color: transparent;
}

::v-deep.el-pagination__total {
  color: #fff;
}

::v-deep .el-radio-button__inner {
  background-color: transparent;
  border: none;
  color: #fff;
}

::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-radius: 0px;
  border-left: none;
}

::v-deep .el-radio-button:last-child .el-radio-button__inner {
  border-radius: 0px;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: rgb(27, 79, 133) !important;
}
</style>